<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button onclick="sendGetRequest()">js发送get</button>
<button onclick="sendPostRequest()">js发送post</button>
<button onclick="sendFetchRequest()">js发送post</button>


<div id="result"></div>

<script>


    function postData(url = '', data = {}) {
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)//stringify json obj -> json str
            //parse json str -> json obj
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(result => {
                console.log('提交成功:', result);
                // 处理返回的数据
                document.getElementById('result').innerHTML = JSON.stringify(result);
            })
            .catch(error => {
                console.error('提交失败:', error);
            });
    }

    // 使用示例
    const formData = {
        name: 'charlie',
        email: 'charlie@qq.com',
        age: 60
    };

    postData('http://localhost:8080/jquery/msc', formData);


    function sendFetchRequest() {
        fetch('http://localhost:8080/jquery/msb')
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log('获取的数据:', data);
                // 处理返回的数据
                document.getElementById('result').innerHTML = JSON.stringify(data);
            })
            .catch(error => {
                console.error('获取数据失败:', error);
            });
    }


    function sendGetRequest() {
        let xhr = new XMLHttpRequest();
        let url = "http://localhost:8080/jquery/msb"

        xhr.open('get', url, true);

        xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 请求成功，解析 JSON 响应
                const response = JSON.parse(xhr.responseText);
                console.log('GET 请求成功:', response);
            } else {
                console.error('GET 请求失败:', xhr.statusText);
            }
        };

        xhr.onerror = function () {
            console.error('网络错误');
        };
        xhr.send();
    }

    function sendPostRequest() {

        const xhr = new XMLHttpRequest();
        const url = 'http://localhost:8080/jquery/msc';
        const data = JSON.stringify({name: 'Charlie', age: 25, 'email': "chalie@163.com"}); // 请求体数据

        xhr.open('POST', url, true); // true 表示异步请求
        xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头

        xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 请求成功，解析 JSON 响应
                const response = JSON.parse(xhr.responseText);
                console.log('POST 请求成功:', response);
            } else {
                console.error('POST 请求失败:', xhr.statusText);
            }
        };

        xhr.onerror = function () {
            console.error('网络错误');
        };

        xhr.send(data); // 发送 POST 请求（带请求体）

        /*        let xhr = new XMLHttpRequest();
                let url = "http://localhost:8080/jquery/msc"

                let data = JSON.stringify({'name': "laoliu", 'age': 45, 'email': 'laoliu@163.com'});


                xhr.setRequestHeader('Content-Type', 'application/json');

                xhr.open('post', url, true);

                xhr.onload = function () {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 请求成功，解析 JSON 响应
                        const response = JSON.parse(xhr.responseText);
                        console.log('GET 请求成功:', response);
                    } else {
                        console.error('GET 请求失败:', xhr.statusText);
                    }
                };

                xhr.onerror = function () {
                    console.error('网络错误');
                };
                xhr.send(data);*/
    }
</script>
</body>
</html>
